<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>趣味小测试</title>
</head>
<style>
/*         背景图片               */
body {
            background-image: url('https://image.wjx.cn/images/newbg/oldbg2.jpg'), url("https://image.wjx.cn/images/newbg/oldbg2-bg.jpg");
            background-position: center top;
            background-repeat: no-repeat, repeat-x;
            background-size: auto auto, auto 1500px;
        }
/*整个文本*/

      .centent {
            text-align: center;
            margin-top:105px;
            margin-left:364px;
            width: 900px;
            border: 0 solid;
            background-color: white;
        }

        /*      ===标题===*/
        h1{
             text-align: center;
             color : #007FCC;
             margin :20px auto
             padding-top : 18px;
        }
        /*========副标题的样式==========*/
        .bord{
            margin: 0 auto;
            padding-top: 6px;
            background: #ffdcb9;
            width: 500px;
            height: 28px;
            border: 1px solid gray;
            border-radius: 10px;
        }
        /*===========星号=========*/
        span.xinhao{
                 color : #F4003D;
        }
        /*==========下方文本=======*/
        .centent-text{
            margin: 0 auto;
            width: 500px;
            border: 0 solid;
            text-align: left;
            padding-top: 50px;
        }


</style>
<body>
<div class="centent">

    <h1>趣味小测试</h1>
    <div class="bord">
        此问卷处于停止状态，仅供浏览，请勿填写！
    </div>

    <form>
        <div class="centent-text"><!--==========表单===========-->
            <b><span class="xinhao">*</span> 1.你的性别？</b><br>                       <!--==========单选框===========-->
            <input type="radio" name="sex" value="male">Male<br>
            <input type="radio" name="sex" value="female">Female<br><br>
            <b><span class="xinhao">*</span> 2.你的爱好是？<label style="color:blue;"> 多选题</label></b> <br>
            <!--===========复选框====-->
            <input type="checkbox" name="hobby" value="看书">看书<br>
            <input type="checkbox" name="hobby" value="运动">运动<br>
            <input type="checkbox" name="hobby" value="摄影">摄影<br>
            <input type="checkbox" name="hobby" value="看电影">看电影<br>
            <input type="checkbox" name="hobby" value="其他">其他<br><br>
            <b><span class="xinhao">*</span> 3.你的生日是？</b><br>
            <input type="text"
                   style="border-bottom: 1px solid;border-top: 0;border-left: 0;border-right: 0;width: 40px">年
            <!--====盒子的内容=-->
            <input type="text"
                   style="border-bottom: 1px solid;border-top: 0;border-left: 0;border-right: 0;width: 40px">月
            <input type="text"
                   style="border-bottom: 1px solid;border-top: 0;border-left: 0;border-right: 0;width: 40px">日<br><br>
            <b><span class="xinhao">*</span> 4.请提出对我们的意见</b><br><textarea rows="7" cols="23"></textarea> <br><br>
            <!--===========文本框====-->
            <b> <span class="xinhao">*</span>5.没其他的意义，就是验证下下拉列表<br>
                <form action="">         <!--==========放在这里，暂时没弄懂==========-->
                    <select name="cars">
                        <option value="volvo">Volvo</option>
                        <option value="saab">Saab</option>
                        <option value="fiat">Fiat</option>
                        <option value="audi">Audi</option>
                    </select>
        </div>
    </form>

    <br> <br> <br>
    <div class="sub">
        <b><input type="submit" value="提交" style="color:red; width:60px ;border: 1px solid; padding-top: 5px; "></b>
    </div>
    <br>               <!--===========提交按钮====-->
    <br> <br> <br>
    </form>

</div>
</body>
</html>